<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="//cdn.bootcss.com/element-ui/1.4.0/theme-default/index.css" rel="stylesheet">
    <link rel="stylesheet" href="index.css">
</head>
<body>
<script src="//cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.16.2/axios.min.js"></script>
<script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="//cdn.bootcss.com/element-ui/1.4.0/index.js"></script>
<div id="app">
    <template>
        <div class="el-row container">
            <el-menu theme="dark" :default-active="activeIndex" class="layui-header" mode="horizontal"
                     @select="handleSelect" id="topbar">
                <span class="sytem-logo">
                    RuofengMS
                </span>
                    <el-menu-item v-for="(item, index) in root" :index="item.id" :id="'id_'+item.id">
                        <i class="iconfont" :class="item.icon"></i>
                        {{item.name}}
                    </el-menu-item>
                <el-submenu index="99" class="systemManagerMenu">
                    <template slot="title">个人中心</template>
                    <el-menu-item index="2-1">选项1</el-menu-item>
                    <el-menu-item index="2-2">选项2</el-menu-item>
                    <el-menu-item index="2-3">选项3</el-menu-item>
                </el-submenu>
            </el-menu>

            <el-row class="tac">
                <el-col :span="3">
                    <el-input placeholder="请输入内容">
                        <el-button slot="append" icon="search" @click="searchMenu"></el-button>
                    </el-input>
                    <el-menu default-active="node-1-1" unique-opened="true" theme="dark" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" id="leftMenu">
                        <el-submenu v-for="(item, index) in leftMenuData" :index="item.id" :id="'id_'+item.id" menuLevel="1">
                            <template slot="title">
                                <i class="iconfont" :class="item.icon"></i>
                                {{item.name}}
                            </template>
                            <el-menu-item v-if="item2.url.length>0" v-for="(item2, index) in item.children" @click="addTab(item2)" :index="item2.id"
                                          :id="'id_'+item2.id">
                                <i class="iconfont" :class="item2.icon"></i>
                                {{item2.name}}
                            </el-menu-item>
                            <el-submenu v-if="item2.url.trim().length==0" v-for="(item2, index) in item.children" :index="item2.id" :id="'id_'+item2.id">
                                <template slot="title">
                                    <i class="iconfont" :class="item2.icon"></i>
                                    {{item2.name}}
                                </template>
                                <el-menu-item v-for="(item3, index) in item2.children" @click="addTab(item3)"
                                              :id="'id_'+item3.id" menuLevel="3" :index="item3.id">
                                    <i class="iconfont" :class="item3.icon"></i>
                                    {{item3.name}}
                                </el-menu-item>
                            </el-submenu>

                        </el-submenu>
                    </el-menu>
                </el-col>
                <el-col :span="21"  style="border-left: 2px solid #1AA094;">
                    <div class="content-container" id="wrap">
                        <el-tabs type="border-card" editable @edit="handleTabsEdit" v-model="editableTabsValue2"
                                 class="layui-body container clearfix"
                                 id="contentWrap">
                            <el-tab-pane v-for="(item, index) in editableTabs2" :label="item.title" :name="item.name">
                                <span slot="label">
                                    <i class="el-icon-date"></i> {{item.title}}
                                </span>
                                <iframe :src="item.url" :style="{height:iframe_height}"
                                        style="width:100%;height:800px" class="tabIframe"></iframe>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                    <!--<div id="footer">底部</div>-->
                </el-col>
            </el-row>

        </div>
    </template>
</div>
<script src="../privilege/sytem.config.js"></script>
<script src="index.js"></script>
</body>
</html>
